<script>
import api from '@/api/apis/sceneRoom'
import { parseSceneData } from '@/utils/scene-data'
import Purpose from './Purpose.vue'
import ImprovementSuggestion from '@/views/userEnergyOptimizationSuggestions/ImprovementSuggestion.vue'
import EnergyAnalysis from '@/views/userEnergyOptimizationSuggestions/EnergyAnalysis.vue'
import FlexibilityAnalysis from '@/views/userEnergyOptimizationSuggestions/FlexibilityAnalysis.vue'
import PhotovoltaicPowerAnalysis from '@/views/userEnergyOptimizationSuggestions/PhotovoltaicPowerAnalysis.vue'
import EnergyStorageAnalysis from '@/views/userEnergyOptimizationSuggestions/EnergyStorageAnalysis.vue'
import ChargingStationAnalysis from '@/views/userEnergyOptimizationSuggestions/ChargingStationAnalysis.vue'
import AIModelAnalysis from '@/views/userEnergyOptimizationSuggestions/AIModelAnalysis.vue'
import { now, subtractDateStr } from '@/utils/date-utils'

export default {
  name: 'UserEnergyOptimizationSuggestions',
  components: {
    AIModelAnalysis,
    ChargingStationAnalysis,
    EnergyStorageAnalysis,
    PhotovoltaicPowerAnalysis,
    FlexibilityAnalysis,
    EnergyAnalysis,
    ImprovementSuggestion,
    Purpose
  },
  data() {
    return {
      queryForm: {
        sceneProjectId: null,
        statisticsMode: 'day', // hour:时，day:日,month: 月,year: 年,
        startTime: null,
        endTime: null
      },
      loading: false,
      projectList: [],
      companyList: [],
      roomList: [],
      datePickerType: 'date',
      timeFormat: 'yyyy-MM-dd',
      startTimeOption: {
        disabledDate: this.disabledStartDate
      },
      endTimeOption: {
        disabledDate: this.disabledEndDate
      }
    }
  },
  created() {
    this.statisticsModeChangeHandler()
    this.$api.commonSelected({
      code: 'SceneProjectSelected'
    }).then(response => {
      this.projectList = response.data
      if (this.projectList.length > 0) {
        this.queryForm.sceneProjectId = this.projectList[0].value
        this.getRoomList(this.queryForm.sceneProjectId)
      }
      this.getList()
    })
    this.$api.commonSelected({
      code: 'SceneCompanySelected'
    }).then(response => {
      this.companyList = response.data
    })
  },
  methods: {
    disabledStartDate(time) {
      if (this.queryForm.endTime == null) {
        return false
      }
      let threshold = 0
      switch (this.queryForm.statisticsMode) {
        case 'hour':
          threshold = 8
          break
        case 'day':
          threshold = 32
          break
        case 'month':
          threshold = 366
          break
        case 'year':
          threshold = 365 * 5
          break
      }
      const date = new Date()
      date.setTime(Date.parse(this.queryForm.endTime) - threshold * 86400000)
      const result = time.getTime() > date.getTime() && time.getTime() < Date.parse(this.queryForm.endTime)
      return !result
    },
    disabledEndDate(time) {
      if (this.queryForm.startTime == null) {
        return false
      }
      let threshold = 0
      switch (this.queryForm.statisticsMode) {
        case 'hour':
          threshold = 8
          break
        case 'day':
          threshold = 32
          break
        case 'month':
          threshold = 366
          break
        case 'year':
          threshold = 365 * 3
          break
      }
      const date = new Date()
      date.setTime(Date.parse(this.queryForm.startTime) + threshold * 86400000)
      const result = time.getTime() > Date.parse(this.queryForm.startTime) && time.getTime() < date.getTime()
      return !result
    },
    statisticsModeChangeHandler() {
      switch (this.queryForm.statisticsMode) {
        case 'day':
          this.datePickerType = 'date'
          this.timeFormat = 'yyyy-MM-dd'
          if (this.queryForm.startTime == null) {
            this.queryForm.startTime = subtractDateStr(new Date(), 7, this.timeFormat.toUpperCase())
          }
          if (this.queryForm.endTime == null) {
            this.queryForm.endTime = now(this.timeFormat.toUpperCase())
          }
          break
        case 'month':
          this.datePickerType = 'month'
          this.timeFormat = 'yyyy-MM'
          break
        case 'year':
          this.datePickerType = 'year'
          this.timeFormat = 'yyyy'
          break
      }
    },
    resetHandler() {
      this.queryForm = {
        statisticsMode: this.queryForm.statisticsMode,
        sceneProjectId: this.queryForm.sceneProjectId
      }
      this.getList()
    },
    getList() {
      this.loading = true
      if (this.queryForm.roomInfo != null && this.queryForm.roomInfo.length > 0) {
        this.queryForm.sceneEdificeId = this.queryForm.roomInfo[0]
        if (this.queryForm.roomInfo.length > 1) {
          this.queryForm.sceneFloorId = this.queryForm.roomInfo[1]
        }
        if (this.queryForm.roomInfo.length > 2) {
          this.queryForm.sceneRoomId = this.queryForm.roomInfo[2]
        }
      } else {
        delete this.queryForm.sceneEdificeId
        delete this.queryForm.sceneFloorId
        delete this.queryForm.sceneRoomId
      }
      this.queryForm = { ...this.queryForm }
      this.loading = false
    },
    async getRoomList(sceneProjectId) {
      if (sceneProjectId == null || sceneProjectId === '') {
        this.roomList = []
      } else {
        let res = await api.queryRoomList({
          sceneProjectId,
          sortColumn: 'floorName',
          sortOrder: 'asc'
        })
        this.roomList = parseSceneData(res.data)

      }
    }
  }
}
</script>

<template>
  <div class="suggestion-container">
    <el-form :model="queryForm" :inline="true">
      <el-row>
        <el-col :span="3">
          <el-form-item>
            <el-radio-group v-model="queryForm.statisticsMode" @change="statisticsModeChangeHandler" size="small">
              <el-radio-button label="day">按日</el-radio-button>
              <el-radio-button label="month">按月</el-radio-button>
              <el-radio-button label="year">按年</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="所属项目" prop="sceneProjectId">
            <el-select v-model="queryForm.sceneProjectId" @change="getRoomList">
              <el-option v-for="item in projectList" :key="item.id" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="所属场景" prop="roomInfo">
            <el-cascader placeholder="请选择所属场景" :props="{'checkStrictly' : true}"
                         v-model="queryForm.roomInfo"
                         :options="roomList">
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="公司名称" prop="sceneCompanyId">
            <el-select v-model="queryForm.sceneCompanyId" clearable>
              <el-option v-for="item in companyList" :key="item.id" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker v-model="queryForm.startTime" :type="datePickerType" :format="timeFormat"
                            :value-format="timeFormat"
                            :picker-options="startTimeOption"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker v-model="queryForm.endTime" :type="datePickerType" :format="timeFormat"
                            :value-format="timeFormat"
                            :picker-options="endTimeOption"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-button size="small" @click="getList" type="primary" icon="el-icon-search">查询</el-button>
            <el-button size="small" @click="resetHandler" icon="el-icon-refresh-right">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="padding: 0 5%" v-loading="loading">
      <Purpose />
      <EnergyAnalysis :query-form="queryForm" :project-list="projectList" />
      <flexibility-analysis />
      <PhotovoltaicPowerAnalysis :query-form="queryForm" :project-list="projectList" />
      <EnergyStorageAnalysis :query-form="queryForm" :project-list="projectList" />
      <ChargingStationAnalysis :query-form="queryForm" :project-list="projectList" />
      <AIModelAnalysis :query-form="queryForm" :project-list="projectList" />
      <ImprovementSuggestion :query-form="queryForm" :project-list="projectList" v-if="projectList.length > 0" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.suggestion-container {
  overflow-y: auto;
  padding: 15px;
  background-color: #ffffff;
  height: 100%;
}
</style>
